package com.example.composestudy.part6

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.example.composestudy.R

private val list = listOf(
    BlendMode.Clear,
    BlendMode.Src,
    BlendMode.Dst,
    BlendMode.SrcOver,
    BlendMode.DstOver,
    BlendMode.SrcIn,
    BlendMode.DstIn,
)

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BlendModeTest() {
    // val width = LocalContext.current.resources.displayMetrics.widthPixels
    // val width = LocalConfiguration.current.screenWidthDp.dp
    var isExpandedDst by remember { mutableStateOf(false) }
    var dstBlendMode by remember { mutableStateOf(BlendMode.SrcOver) }
    var isExpandedSrc by remember { mutableStateOf(false) }
    var srcBlendMode by remember { mutableStateOf(BlendMode.SrcOver) }
    var isExpandedSetting by remember { mutableStateOf(false) }
    var isBoth by remember { mutableStateOf(true) }
    var isShowBorder by remember { mutableStateOf(false) }
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "BlendMode") },
                actions = {
                    IconButton(onClick = { isExpandedSetting = true }) {
                        Icon(
                            imageVector = Icons.Default.Settings,
                            contentDescription = null
                        )
                    }
                    DropdownMenu(
                        expanded = isExpandedSetting,
                        onDismissRequest = { isExpandedSetting = false },
                        offset = DpOffset(0.dp, 0.dp)
                    ) {
                        DropdownMenuItem(onClick = {
                            isBoth = !isBoth
                            isExpandedSetting = false
                        }) {
                            Text(if (isBoth) "模式单独选择" else "模式同时设置")
                        }
                        DropdownMenuItem(onClick = {
                            isShowBorder = !isShowBorder
                            isExpandedSetting = false
                        }) {
                            Text(if (isShowBorder) "不显示边框" else "显示边框")
                        }
                    }
                }
            )
        }
    ) { innerPadding ->
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(innerPadding)
        ) {
            Row {
                Box(
                    modifier = Modifier.weight(1f)
                ) {
                    ListItem(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { isExpandedDst = !isExpandedDst },
                        text = { Text(text = dstBlendMode.toString()) },
                        trailing = {
                            Icon(
                                imageVector = Icons.Default.ArrowDropDown,
                                contentDescription = "DropDown"
                            )
                        }
                    )
                    ShowBlendModeMenu(
                        expanded = isExpandedDst,
                        onDismissRequest = { isExpandedDst = false },
                    ) {
                        dstBlendMode = it
                        if (isBoth) {
                            srcBlendMode = it
                        }
                        isExpandedDst = false
                    }
                }
                Box(
                    modifier = Modifier.weight(1f)
                ) {
                    ListItem(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { isExpandedSrc = !isExpandedSrc },
                        text = { Text(text = srcBlendMode.toString()) },
                        trailing = {
                            Icon(
                                imageVector = Icons.Default.ArrowDropDown,
                                contentDescription = "DropDown"
                            )
                        }
                    )
                    ShowBlendModeMenu(
                        expanded = isExpandedSrc,
                        onDismissRequest = { isExpandedSrc = false },
                    ) {
                        srcBlendMode = it
                        if (isBoth) {
                            dstBlendMode = it
                        }
                        isExpandedSrc = false
                    }
                }
            }
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            BlendMode1(dstBlendMode, srcBlendMode, isShowBorder)
            Divider()
            BlendMode2(dstBlendMode, srcBlendMode, isShowBorder)
        }
    }

}

@Composable
private fun ShowBlendModeMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    onItemClick: (blendMode: BlendMode) -> Unit,
) {
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = onDismissRequest,
        offset = DpOffset(0.dp, 0.dp)
    ) {
        list.forEach { blendMode ->
            DropdownMenuItem(onClick = {
                onItemClick(blendMode)
            }) {
                Text(blendMode.toString())
            }
        }
    }
}

@Composable
private fun BlendMode2(
    dstBlendMode: BlendMode,
    srcBlendMode: BlendMode,
    isShowBorder: Boolean,
) {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        drawCircle(
            color = Color.Red,
            radius = 175f,
            center = Offset(350f, 350f),
            blendMode = dstBlendMode
        )
        drawRect(
            color = Color.Blue,
            topLeft = Offset(350f, 350f),
            size = Size(300f, 300f),
            blendMode = srcBlendMode
        )
        if (isShowBorder) {
            drawRect(
                color = Color.Red,
                topLeft = Offset(175f, 175f),
                size = Size(175f * 2, 175f * 2),
                style = Stroke(width = 5f),
            )
            drawRect(
                color = Color.Green,
                topLeft = Offset(350f, 350f),
                size = Size(300f, 300f),
                style = Stroke(width = 5f),
            )
        }
    }
}

@Composable
private fun BlendMode1(
    dstBlendMode: BlendMode,
    srcBlendMode: BlendMode,
    isShowBorder: Boolean,
) {
    val destination = ImageBitmap.imageResource(id = R.drawable.canvas_dst)
    val source = ImageBitmap.imageResource(id = R.drawable.canvas_src)
    Canvas(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxWidth()
            .height(300.dp)
    ) {
        drawImage(
            image = destination,
            dstSize = IntSize(600, 600),
            blendMode = dstBlendMode,
        )
        drawImage(
            image = source,
            dstSize = IntSize(600, 600),
            blendMode = srcBlendMode,
        )
        if (isShowBorder) {
            drawRect(
                color = Color.Green,
                size = Size(600f, 600f),
                style = Stroke(width = 5f),
            )
        }
    }
}